<template>
  <div class="DcnBottom">
    <CodeCard v-bind="btnDesc">
      <el-row>
        <sdn-button>默认按钮</sdn-button>
        <sdn-button type="primary">主要按钮</sdn-button>
        <sdn-button type="success">成功按钮</sdn-button>
        <sdn-button type="info">信息按钮</sdn-button>
        <sdn-button type="warning">警告按钮</sdn-button>
        <sdn-button type="danger">危险按钮</sdn-button>
      </el-row>
      <el-row>
        <sdn-button plain>朴素按钮</sdn-button>
        <sdn-button type="primary" plain>主要按钮</sdn-button>
        <sdn-button type="success" plain>成功按钮</sdn-button>
        <sdn-button type="info" plain>信息按钮</sdn-button>
        <sdn-button type="warning" plain>警告按钮</sdn-button>
        <sdn-button type="danger" plain>危险按钮</sdn-button>
      </el-row>
      <el-row>
        <sdn-button round>圆角按钮</sdn-button>
        <sdn-button type="primary" round>主要按钮</sdn-button>
        <sdn-button type="success" round>成功按钮</sdn-button>
        <sdn-button type="info" round>信息按钮</sdn-button>
        <sdn-button type="warning" round>警告按钮</sdn-button>
        <sdn-button type="danger" round>危险按钮</sdn-button>
      </el-row>
      <el-row>
        <sdn-button icon="sdn-icon-search" circle></sdn-button>
        <sdn-button type="primary" icon="sdn-icon-edit" circle></sdn-button>
        <sdn-button type="success" icon="sdn-icon-check" circle></sdn-button>
        <sdn-button type="info" icon="sdn-icon-message" circle></sdn-button>
        <sdn-button type="warning" icon="sdn-icon-star-off" circle></sdn-button>
        <sdn-button type="danger" icon="sdn-icon-delete" circle></sdn-button>
      </el-row>
      <template #more>
        <DescripeCard>按钮的loading</DescripeCard>
        <ShowCodeCard :code="loadingCode">
          <el-row>
            <sdn-button :loading="true">loading</sdn-button>
          </el-row>
        </ShowCodeCard>
      </template>
    </CodeCard>
  </div>
</template>

<script>

import { reactive } from 'vue'

export default {
  setup() {
    let btnDesc = {
      title: "Button 按钮",
      describe: "常用的操作按钮。",
      codeBlock: `
<sdn-button>默认按钮</sdn-button>
<sdn-button type="primary">主要按钮</sdn-button>
<sdn-button type="success">成功按钮</sdn-button>
<sdn-button type="info">信息按钮</sdn-button>
<sdn-button type="warning">警告按钮</sdn-button>
<sdn-button type="danger">危险按钮</sdn-button>`,
      attrs: []
    };
    const attrsList = reactive([
      ['size', '尺寸', 'string', 'medium / small / mini', '—'],
      ['type', '类型', 'string', 'primary / success / warning / danger / info / text', '—'],
      ['plain', '是否朴素按钮', 'boolean', '—', 'false'],
      ['round', '是否圆角按钮	', 'boolean', '—', 'false'],
      ['circle', '是否圆形按钮', 'boolean', '—', 'false'],
      ['loading', '是否加载中状态', 'boolean', '—', 'false'],
      ['disabled', '是否禁用状态', 'boolean', '—', 'false'],
      ['icon', '图标类名', 'string', '—', '—'],
      ['autofocus', '是否默认聚焦', 'boolean', '—', 'false'],
      ['native-type', '原生 type 属性', 'string', 'button / submit / reset', 'button'],
    ])
    attrsList.forEach(item => {
      btnDesc.attrs.push(
        {
          name: item[0],
          describe: item[1],
          type: item[2],
          emun: item[3],
          default: item[4],
        }
      )
    })

    const loadingCode = `
    <sdn-button :loading="true">loading</sdn-button>`
    return {
      loadingCode,
      btnDesc,
    };
  },
};
</script>

<style lang="stylus">
.DcnBottom {
  .el-row {
    margin-top: 20px;
  }
}
</style>
